/**
 * Rightbar module
 */

import React, {Component} from 'react';
import {connect} from 'dva';
import classnames from 'classnames';
import {bindActionCreators} from 'redux';
import editorActions from '../../../actions/Editor/editor';

import WidgetEvent from "./WidgetEvent";
import WidgetAnimation from "./WidgetAnimation";
import PageProperty from "./PageProperty";
import PagePropertyHeader from "./PagePropertyHeader";
import WidgetProperty from "./WidgetProperty";
import WidgetPropertyHeader from "./WidgetPropertyHeader";
import RedBagProperty from "./RedBagProperty";
import FixedBtnProperty from "./FixedBtnProperty";
import LookerProperty from "./LookerProperty";
import HopeBankProperty from "./HopeBankProperty";
import TemplateProperty from "./template/Property";
import AlignmentProperty from "./AlignmentProperty";

var storage = require("../../../utils/storage");

import FocusTab from "../../../consts/focusTabs";

class Rightbar extends Component {
    getInitialProps() {
        return {
            page: {},
            root: {},
            widgets: [],
            focusTab: "",
            timelines: {},
            fromTemplate: false,
            selectedTimeline: {},
        }
    }

    render() {
        const {focusTab, timelines, widgets, pageJump, page, selectedWidgetIds, selectedWidget, selectedTimeline} = this.props;
        var fromTemplate = this.props.fromTemplate;
        var selectedIds = selectedWidgetIds;
        var innerNode = "", headerNode = "";
        if (fromTemplate) {
            innerNode = <TemplateProperty timelines={timelines} widgets={widgets} page={page} pageJump={pageJump} ref='TemplateProperty'/>
        } else {
            if (selectedIds.length === 1) {
                let widgetObj = selectedWidget;
                if (widgetObj) {
                    headerNode = <WidgetPropertyHeader focusTab={focusTab}/>
                    if (focusTab === FocusTab.REDBAG) {
                        innerNode = <RedBagProperty widget={widgetObj}/>
                    } else if (focusTab === FocusTab.FIXEDBTN) {
                       innerNode = <FixedBtnProperty/>
                    } else if (focusTab === FocusTab.LOOKERS) {
                        innerNode = <LookerProperty />
                    } else if (focusTab === FocusTab.HOPEBANK) {
                       innerNode = <HopeBankProperty widget={widgetObj}/>
                    } else {
                        if (focusTab === FocusTab.PROPERTY) {
                            innerNode = <WidgetProperty widget={widgetObj}/>
                        } else if (focusTab === FocusTab.ANIMATION) {
                            innerNode = <WidgetAnimation />
                        } else if (focusTab === FocusTab.EVENT) {
                            innerNode = <WidgetEvent timelines={timelines} widget={widgetObj} parent={this}
                                                     fromTemplate={fromTemplate}/>
                        }
                    }
                } else {
                    headerNode = <PagePropertyHeader focusTab={focusTab}/>
                    innerNode = <PageProperty focusTab={focusTab} page={page} pageJump={pageJump}/>
                }
            } else if (selectedIds.length > 1) {
               innerNode = <AlignmentProperty />
                // selectedIds.length == 0
            } else {
                headerNode = <PagePropertyHeader focusTab={focusTab}/>
                innerNode = <PageProperty focusTab={focusTab} page={page} pageJump={pageJump}/>
            }
        }
        return (
            <div className="Editor-right">
                { headerNode }
                <div className="sidebar-container">
                    { innerNode }
                </div>
            </div>
        )
    }
}

const mapStateToProps = ({editor, widgets, timelines, pages, pageJump, pageTimelines}) => {
    const pageId = editor.selectedPageId;
    return {
        selectedPageId: editor.selectedPageId,
        focusTab: editor.focusTab,
        fromTemplate: editor.fromTemplate,
        selectedWidgetIds: editor.selectedWidgetIds,
        selectedWidget: editor.selectedWidget,
        selectedTimeline: editor.selectedTimeline,
        widgets: widgets.filter(w => w.page_id === pageId),
        timelines: timelines.filter(t => t.page_id === pageId),
        page: pages.filter(p => p.page_id === pageId)[0],
        pageJump,
        pageTimelines: pageTimelines.filter(p => p.page_id === pageId)[0]
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(editorActions, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(Rightbar);
